<!--
 * @Author: liaoxing
 * @Date: 2022-01-18 18:27:40
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-02 15:14:29
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\chooseTree\chooseTree.vue
-->
<template>
  <div class="chooseTree">
    <div class="chooseBox" @click="openTree()" @mouseleave="openSelect = false">
      <!-- <el-tooltip :content="receiverName" placement="top" effect="dark"> -->
      {{ chooseValue }}
      <!-- </el-tooltip> -->
      <div class="chooseExtendsBox" v-show="openSelect">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <div class="elTreeBox">
          <el-tree
            :data="treeList"
            :props="defaultProps"
            :node-key="nodeKey || 'id'"
            :show-checkbox="multiple"
            @node-click="handleNodeClick"
            @check-change="handleNodeCheck"
            :filter-node-method="filterNode"
            :highlight-current="true"
            ref="taskTree"
            default-expand-all
          >
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chooseTree",
  props: ['treeList', 'defaultProps', 'multiple', 'initId', 'nodeKey'],
  data () {
    return {
      openSelect: false,
      chooseValue: "",
      chooseValueList: "",
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.taskTree.filter(val);
    },
    initId (val) {
      if (!val) {
        this.chooseValue = ''
      }
    }
  },
  created () {
  },
  mounted () {
    if (this.initId * 1) {
      this.$refs.taskTree.setCurrentKey(this.initId)
      this.$nextTick(() => {
        let node = this.$refs.taskTree.getCurrentNode()
        if (!node) return
        this.chooseValue = node[this.defaultProps.label]
      })
    }
  },
  methods: {
    /* 打开选择树 */
    openTree () {
      this.openSelect = true
    },
    handleNodeClick (item, node) {
      this.chooseValue = item[this.defaultProps.label]
      this.$emit('getResult', item)
      this.openSelect = false
    },
    handleNodeCheck (node, value) {
      // console.log(node, value)
      // this.chooseValue += node.label
      // this.$emit('getResult', node)
    },
    /* 过滤 */
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
  }
}
</script>

<style lang="less">
.chooseTree{
  position: absolute;
  width: 240px;
  .chooseBox{
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0 15px;
    .chooseExtendsBox{
      height: 300px;
      width: 100%;
      position: absolute;
      top: 38px;
      left: 0;
      border-radius: 4px;
      background-color: white;
      // box-shadow: 0 0 2px 1px rgb(194, 194, 194) inset;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      padding: 20px;
      margin-bottom: 10px;
      .elTreeBox{
        overflow: auto;
        height: 220px;
      }
    }
  }
}
</style>